import { Component } from 'react';
import fetch from 'dva/fetch';
import { Row, Col } from 'antd';

import styles from './index.less';
import stylesGlobal from '../global.less';

class Fetch extends Component<any> {
  state = {
    list: [],
    time: ''
  }

  componentDidMount() {
    fetch('https://www.tianqiapi.com/free/week?unescape=1&appid=25931319&appsecret=y3T5NsHU').then((response:any) => {
      if (response.status == 200) {
        response.json().then((res:any) => {
          this.setState({
            list: res.data,
            time: res.update_time
          })
        })
      }
    })
  }
  renderDay = () => {
    return (
      this.state.list.map((item, index) => {
        return (    
          <Col span={3} key={index} className={styles.weatherBlock_item}>
            <p>{item['date']}</p>
            <img src={require(`@/assets/${item['wea_img']}.png`)} alt="" />
            <p>{item['tem_night']}~{item['tem_day']}℃</p>
            <p>{item['wea']}</p>
            <p style={{ marginBottom: '0' }}>{item['win']}{item['win_speed']}</p>
          </Col>
        )
      })
    )
  }
  render() {
    const { time } = this.state
    return (
      <>
        <div className={styles.weatherBlock}>
          <p>陕西西安一周天气预报</p>
          <Row gutter={[8, 8]} style={{ marginLeft: '0' }}>
            {
              this.renderDay()
            }
          </Row>
          <div className={styles.weatherExtra}>最后更新时间：{time}</div>
        </div>
        <div className={stylesGlobal.descriptionBlock}>
          <p>Tips：</p>
          <p>1. Usage of fetch</p>
          <p>2. Import fetch between different version</p>
        </div>
      </>
    );
  }
}

export default Fetch;
